<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
          <div class="d-flex jc-center">
            <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
            <div class="title">
              <span class="title-text">大数据可视化平台</span>
              <dv-decoration-6
                class="title-bototm"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
                style="width:3.125rem;height:.1rem;"
              />
            </div>
            <dv-decoration-8
              :reverse="true"
              :color="['#568aea', '#000000']"
              style="width:2.5rem;height:.625rem;"
            />
          </div>
          <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
        </div>

        <div class="body-box">
          <div class="login_box">
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="账号" prop="username">
                <el-input type="username" v-model="ruleForm.username" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                <el-button @click="register()">注册</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

  <script>
import { loginFrom } from "@/api/login.js"; //引入
export default {
  data() {
    var checkacc = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        // if (this.ruleForm.username !== "") {
        //   this.$refs.ruleForm.validateField("username");
        // }
        callback();
      }
    };
    var checkPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        // if (this.ruleForm.password !== "") {
        //   this.$refs.ruleForm.validateField("password");
        // }
        callback();
      }
    };

    return {
      loading: true,
      ruleForm: {
        username: "ROOT",
        password: "123456"
      },
      rules: {
        username: [{ validator: checkacc, trigger: "blur" }],
        password: [{ validator: checkPass, trigger: "blur" }]
      }
    };
  },
  components: {},
  mounted() {
    this.cancelLoading();
  },
  methods: {
    submitForm(formName) {
      console.log(formName);
      this.$refs[formName].validate(valid => {
        if (valid) {
          loginFrom(this.ruleForm)
            .then(res => {
              // console.log("res===>", res);
              let { data } = res;
              console.log("====>", data);
              if (data.code == 200) {
                if ((data.isAdmin == true)) {
                  this.$message({
                    message: data.message,
                    type: "success"
                  });
                  const isLoggedIn = this.ruleForm;
                  const jsonString = JSON.stringify(isLoggedIn);
                  sessionStorage.setItem("token", jsonString);
                  this.$router.push("/mannge");
                } else {
                  const isLoggedIn = this.ruleForm;
                  const jsonString = JSON.stringify(isLoggedIn);
                  sessionStorage.setItem("token", jsonString);
                  this.$message({
                    message: data.message,
                    type: "success"
                  });
                  this.$router.push("/index/cart_info2");
                }
              } else {
                this.$message({
                  message: data.message,
                  type: "error"
                });
              }
            })
            .catch(err => {
              let {
                response: {
                  data: { message }
                }
              } = err;
              this.$message({
                message: message,
                type: "error"
              });
              // console.log("====>", data);
              // console.log("==>",err);
            });

          // const isLoggedIn = "已经登录";
          // const jsonString = JSON.stringify(isLoggedIn);

          // sessionStorage.setItem("user", jsonString);
          // let user_info = 0;
          // if ((user_info == 0) & (this.ruleForm.username == "admin")) {
          //   this.$router.push("/mannge");
          // } else {
          //   this.$router.push("/index/cart_info2");
          // }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    register() {
      this.$router.push("/register");
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    }
  }
};
</script>

  <style lang="scss">
@import "../assets/scss/login.scss";
</style>